<template>
  <div>
    <div>
      <header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <router-link to="/user">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <span class="iconfont">&#xe609;</span>
              </div>
            </el-col>
          </router-link>
          <div style="margin-right: 40.3%;color: #fff; font-size: 20px;">我的收藏</div>
        </el-row>
      </header>
      <div style="height: 40.8px"></div>
    </div>
    <div v-for="item in collectlist">
      <div class="collect-all">
        <el-avatar shape="square" :size="45" :fit="fits" :src="item.activityImg"></el-avatar>
        <div style="display: flex;flex-direction:column;">
          <div class="collect-nickname">{{item.nickName}}</div>
          <div class="collect-time">{{item.currentDate}}</div>
        </div>
      </div>
      <div class="collect-img">
        <img class="img" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
        <div>{{'名称：'+item.activityName}}</div>
      </div>
      <div class="collect-bnt">
        <el-button v-if="item.isshow"><li class="el-icon-star-on"></li><span>取消收藏</span></el-button>
        <el-button v-else><li class="el-icon-star-off"></li><span>加入收藏</span></el-button>
      </div>
      <div class="oneline"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'Collect',
    props: {
      userId: String
    },
    data() {
        return {
            fits: 'contain',
            collectlist: [],
            isshow: true
        }
    },
    methods: {
      getHomeInfo () {
          axios.get('/static/mock/collectlist.json')
              .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc (res) {
          res = res.data
          if (res.ret && res.data) {
              const data = res.data
              this.collectlist = data.usercollect
          }else {
              alert('数据获取失败')
          }
          console.log(res)
      }
    },
    mounted () {
        this.getHomeInfo()
    }
}
</script>

<style scoped>
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    line-height: 2.5rem;
    background: #67C23A;
    text-align: center;
  }
  .iconfont {
    font-size: 1.6rem;
    color: #fff;
    margin-left: .4rem;
  }
  .collect-all {
    display: flex;
    margin-top: 20px;
    margin-left: 25px;
  }
  .collect-nickname {
    width: 150px;
    padding-left: 12px;
    height: 21px;
  }
  .collect-time {
    font-size: 12.5px;
    color: #ccc;
    padding-left: 12px;
    padding-top: 4px;
  }
  .collect-img {
    margin-left: 60px;
    margin-top: 15px;
    padding-bottom: 5px;
    border-bottom: solid 1px #E4E7ED;
  }
  .img {
    width: 225px;
    fit: contain;
  }
  .collect-bnt {
    display: flex;
    flex-direction: row-reverse;
    margin: 10px 15px 10px 0;
  }
  .but1 {
    height: 35px;
    background-color: #fff;
    border: solid;
  }
  .el-icon-star-on {
    color: #E6A23C;
  }
  .oneline {
    height: 5px;
    width: 100%;
    background-color: #E4E7ED;
  }
</style>